<template>
  <div class="song-list">
    <van-nav-bar
      litle="歌单详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="bg">
      <img :src="song.coverImgUrl" alt="" />
    </div>
    <div class="header">
      <img :src="song.coverImgUrl" alt="" />
      <h4>{{ song.name }}</h4>
      <div class="nick">
        <img :src="song.avatarUrl" alt="" />
        <span>{{ song.nickname }}</span>
      </div>
      <div class="xing">
        <img src="" alt="" />
      </div>
      <span class="count">{{ song.commentCount | numFilter(1) }}万</span>
    </div>
    <div class="gqlb">歌曲列表</div>
    <div class="list1">
      <van-list>
        <div class="info">
          <div class="list" v-for="(item, index) in list" :key="item.id">
            <div class="code">
              {{ index > 8 ? index + 1 : "0" + (index + 1) }}
            </div>
            <div class="list-item">
              <div class="left">
                <div class="subtitle">
                  {{ item.name }} <span>{{ item.alia[0] }}</span>
                </div>
                <div class="author">
                  <span v-for="ele in item.ar" :key="ele.id" class="ele"
                    >{{ ele.name }}
                  </span>
                  - {{ item.al.name }}
                </div>
              </div>
              <div class="right">
                <svg
                  t="1686885171956"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="1720"
                  width="200"
                  height="200"
                >
                  <path
                    d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m0 981.333333C253.866667 981.333333 42.666667 770.133333 42.666667 512S253.866667 42.666667 512 42.666667s469.333333 211.2 469.333333 469.333333-211.2 469.333333-469.333333 469.333333z"
                    fill="#666666"
                    p-id="1721"
                  ></path>
                  <path
                    d="M672 441.6l-170.666667-113.066667c-57.6-38.4-106.666667-12.8-106.666666 57.6v256c0 70.4 46.933333 96 106.666666 57.6l170.666667-113.066666c57.6-42.666667 57.6-106.666667 0-145.066667z"
                    fill="#666666"
                    p-id="1722"
                  ></path>
                </svg>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      song: {
        name: "", 
        coverImgUrl: "",
        avatarUrl: "", 
        nickname: "", 
        commentCount: 0
      },
      songlist: [], 
      tracks: 0, 
      list: [],
      loading: false,
      finished: false,
    };
  },
  created() {
    this.getListDate();
    this.getPlaylist();
  },
  methods: {
    getListDate() {
      this.$request("get", "/playlist/detail?id=5461537154").then((res) => {
        console.log(res);
        this.song.name = res.playlist.name;
        this.song.coverImgUrl = res.playlist.coverImgUrl;
        this.song.avatarUrl = res.playlist.creator.avatarUrl;
        this.song.nickname = res.playlist.creator.nickname;
        this.song.commentCount = res.playlist.commentCount;
        this.songlist = res.playlist.songlist; //获取歌曲列表信息
        this.tracks = res.playlist.tracks; //获取歌曲数目
      });
    },
    getPlaylist() {
      this.$request("get", "/playlist/detail?id=5461537154").then((res) => {
        console.log(res);
        this.list = res.playlist.tracks;
        this.upTime = res.playlist.updateTime;
      });
    },
    onClickLeft() {
      window.history.length > 1 ? this.$route.go(-1) : this.$router.push("/");
    },
    onLoad() {
      setTimeout(() => {
        this.list = this.list.concat(this.Playlist.splice(0, 10));

        this.loading = false;

        if (this.list.length >= this.tracks) {
          this.finished = true;
        }
      }, 1000);
    },
  },
};
</script>

<style scoped>
.bg {
  position: absolute;
  z-index: -1;
  position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
.bg>img{
  width: 70%;
  height: 150px;
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
    filter: blur(10px);
}
.header > img {
  width: 35%;
  float: left;
  margin-left: 20px;
  margin-right: 20px;
}
.header > h4 {
  font-size: 22px;
  margin-right: 20px;
  color: white;
  font-family:STKaiti;
}
.nick {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
}
.nick > img {
  margin-left: -100px;
  height: 2rem;
  border-radius: 50%;
  margin-right: 0.5rem;
}
.nick > span {
  height: 2rem;
  font-size: 0.8rem;
  line-height: 2rem;
}
.xing {
  background-position: -40px 0;
  position: absolute;
  left: 200px;
  top: 135px;
  width: 12px;
  height: 12px;
  background-image: url(//s3.music.126.net/mobile-new/img/usericn_2x.png?6423c06…=);
  background-repeat: no-repeat;
  background-size: 75px auto;
}
.count {
  position: absolute;
  left: 90px;
  top: 40px;
  z-index: 3;
  padding-left: 15px;
  color: #fff;
  font-size: 12px;
  background-position: 0;
  background-repeat: no-repeat;
  background-size: 11px 10px;
  text-shadow: 1px 0 0 rgba(0, 0, 0, 0.15);
  background-image: url();
}
.gqlb {
  margin-top: 30px;
  padding-left: 10px;
  width: 100%;
  text-align: left;
  background: rgb(210, 203, 203);
}

.top {
  height: 60px;
  background-color: rgb(196, 49, 51);
  color: whitesmoke;
  text-align: left;
  font-size: 40px;
}
.list {
  margin: 0 1rem;
  width: 100%;
  display: flex;
}
.list h3 {
  text-align: left;
  font-size: 1rem;
}
.list-item {
  border-bottom: 1px solid #eee;
  padding-left: 10px;
  width: 800px;
  padding-top: 6px;
  padding-bottom: 6px;
  display: flex;
  flex: 1px;
}
.list .code {
  width: 2rem;
  text-align: center;
  justify-content: center;
  display: flex;
  align-items: center;
  font-size: 16px;
}
.singer {
  text-align: center;
}
.singer span {
  font-size: 0.8rem;
  color: rgb(160, 160, 190);
}
.singer > span:nth-last-child(1) > span:nth-child(1) {
  color: red;
  font-weight: 900;
  padding: 0.5rem;
}
.left {
  width: 16rem;
}
.right svg {
  width: 25px;
  height: 100%;
}
.subtitle {
  font-size: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
  text-align: left;
}
.author {
  text-align: left;
  margin-top: 4px;
  font-size: 12px;
  color: #888;
  text-overflow: ellipsis;
}
.author .span {
  margin-left: 5px;
  text-overflow: ellipsis;
}
.author img {
  margin-left: 3px;
  width: 15px;
}
</style>